/**
 * Created by huotaol on 2017/6/2.
 */

import React from "react";
import {Image, Text, View, TouchableOpacity, ActivityIndicator} from "react-native";
import CustomStyle from "../../common/style/CustomStyle";
import{connect} from 'react-redux';
import * as HomePageAction from "../redux/action/homePage";

class LoadingText extends React.Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }


    render() {
        console.log('LoadingText render ' + this.props.show);
        if (this.props.show) {
            return (
                <TouchableOpacity activeOpacity={1}
                                  style={[CustomStyle.modalContainer,]}
                                  onPress={() => this.props.setLoading(false, '')}>
                    <View
                        style={{
                            position: 'absolute',
                            backgroundColor: 'rgba(0,0,0,0.6)',
                            borderRadius: 10,
                            borderTopWidth: 1,
                            borderLeftWidth: 1,
                            borderRightWidth: 1,
                            borderBottomWidth: 1,
                            borderColor: '#fff',
                            left: CustomStyle.getActualSizeInHorizontal(225),
                            width: CustomStyle.getActualSizeInHorizontal(300),
                            top: CustomStyle.getActualSizeInVertical(570),
                            height: CustomStyle.getActualSizeInVertical(260),
                        }}>
                        <ActivityIndicator
                            animating={true}
                            style={{alignItems: 'center', justifyContent: 'center', height: 80}}
                            size="large"/>
                        <Text style={{color: '#fff', textAlign: 'center', top: 0}}>{this.props.text}</Text>
                    </View>
                </TouchableOpacity>
            );
        } else {
            return (
                <View />
            );
        }
    }
}

const mapStateToProps = (state) => {
    const {loading} = state;
    const {loadModal} = loading;
    return {
        show: loadModal.loading,
        text: loadModal.text,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setLoading: (loading, text) => {
            dispatch(HomePageAction.setLoadingState(loading, text));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoadingText);